<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <div class="logo">
          <img src="" alt="">
        </div>
        <span class="logo_font">Welcome</span>
      </div>
  <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form" :label-position="labelPosition" required>

    <!-- 用户名 -->
  <el-form-item prop="username" label="用户名">
    <el-input v-model="loginForm.username"  ></el-input>
  </el-form-item>
  <!-- 密码 -->
   <el-form-item prop="password" label="密码">
     <el-input v-model="loginForm.password" type="password"  ></el-input>
  </el-form-item>

    <el-radio v-model="radio" label="1">记住账号</el-radio>

  <!-- 按钮区域 -->
   <el-form-item class="btns">
   <el-button type="primary" @click="login" round>登录</el-button>
  </el-form-item>
  </el-form>

    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            radio:'1',
            labelPosition: 'top',
            loginForm: {
                username: '',
                password: ''
            },
            loginFormRules: {
                username: [
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        login() {

        }
    }
};
</script>

<style lang="less" scoped>
  .login_container {
    height: 100%;
    background-color: #ccc;
      .login_box {
        position: absolute;
        left: 70%;
        transform: translate(-50%);
        height: 100%;
        width: 480px;
        background-color:#30313a;
        .avatar_box{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100px;
          height: 100px;
          margin: 150px auto;
          .logo{
            text-align: center;
            width: 70px;
            height: 70px;
          }
          img{
            margin: 0 0 5px 10px;
            width: 100%;
            height: 100%;
          }
          .logo_font{
            font-size: 20px;
            color: #fff;
            font-weight: 7px;
          }
        }
        .login_form{
            position: absolute;
            bottom: 108px;
            width: 100%;
            padding: 0 40px;
            box-sizing: border-box;
        }
        /deep/ .el-form-item__label{
           color: #fff;

        }
        /deep/ .el-form-item is-required{
          height: 60px;
        }
        .el-form-item{
          padding-top: 10px;
        }
        .el-button{
          width: 384px;
          height: 48px;
          font-size: 15px;
          display: inline-block;
          margin-left: 7px;
          margin-top: 30px;
        }
      }
  }

  /deep/ .el-input__inner{
            background-color: #30313a;
            border: 0 !important;
            border-bottom: 2px solid #ccc !important;
             outline-style: none !important;
             border-radius: 0 !important;
          }
        // /deep/  .is-error .el-input__inner{
        //   border-color: none ;

        // }
          /deep/ .el-form-item__label:before{
            content:''!important;
          }


</style>
